<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css实现边框跑马灯效果</title>
    <style>
      .box {
        height: 300px;
        width: 400px;
        box-shadow: 0 0 3px orange;
        text-align: center;
        line-height: 280px;
      }

      .horse_run {
        background-image: linear-gradient(
            90deg,
            rgba(196, 233, 64, 0) 0%,
            rgb(62, 224, 84) 100%
          ),
          linear-gradient(0deg, rgb(62, 224, 84) 0%, rgba(196, 233, 64, 0) 100%),
          linear-gradient(
            -90deg,
            rgba(196, 233, 64, 0) 0%,
            rgb(62, 224, 84) 100%
          ),
          linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 100%);
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
        background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
        background-position: -100px 1px, calc(100% - 1px) -100px,
          calc(100% + 100px) calc(100% - 1px), 1px 0px;
        animation: moveLine 8s infinite linear;
        height: calc(100% - 2px);
        padding: 1px;
        background-clip: content-box;
      }

      @keyframes moveLine {
        0% {
          background-position: -100px 1px, calc(100% - 1px) -100px,
            calc(100% + 100px) calc(100% - 1px), 1px 0px;
        }
        5% {
          background-position: 0px 1px, calc(100% - 1px) -100px,
            calc(100% + 100px) calc(100% - 1px), 1px -100px;
        }
        30% {
          background-position: 100% 1px, calc(100% - 1px) -100px,
            calc(100% + 100px) calc(100% - 1px), 1px -100px;
        }
        35% {
          background-position: calc(100% + 100px) 1px, calc(100% - 1px) 0px,
            calc(100% + 100px) calc(100% - 1px), 1px -100px;
        }
        50% {
          background-position: calc(100% + 100px) 1px, calc(100% - 1px) 100%,
            calc(100% + 100px) calc(100% - 1px), -100px -100px;
        }
        55% {
          background-position: calc(100% + 100px) 1px,
            calc(100% - 1px) calc(100% + 100px), 100% calc(100% - 1px),
            -100px calc(100% + 100px);
        }
        80% {
          background-position: calc(100% + 100px) 1px,
            calc(100% - 1px) calc(100% + 100px), 0px calc(100% - 1px),
            1px calc(100% + 100px);
        }
        85% {
          background-position: calc(100% + 100px) 1px,
            calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px),
            1px 100%;
        }
        100% {
          background-position: calc(100% + 100px) 1px,
            calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px),
            1px 0px;
        }
      }
    </style>
  </head>

  <body>
    <div class="box horse_run">小马跑起来~</div>
  </body>
</html>
